<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<link href="${resource(dir: 'css', file: 'elastislide.css')}" type="text/css" media="all" rel="stylesheet" />
    
<script type="text/javascript" language="javascript" src="${resource(dir: 'js', file: 'modernizr.custom.17475.js')}"></script>
<script type="text/javascript" language="javascript" src="${resource(dir: 'js', file: 'jquery.elastislide.js')}"></script>
<script type="text/javascript" language="javascript" src="${resource(dir: 'js', file: 'script.js')}"></script>
<script type="text/javascript" language="javascript" src="${resource(dir: 'js', file: 'chatRoom.js')}"></script>
<meta name="layout" content="guest"/>

		<style type="text/css" media="screen"> 
            html, body  { height:100%; }
            body { margin:0; padding:0; overflow:auto; text-align:center; 
                   background-color: #ffffff; }   
            object:focus { outline:none; }
            #flashContent { display:none; }
        </style>
        
        <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
        <!-- BEGIN Browser History required section -->
        <link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'history.css')}" />
        <script type="text/javascript" src="${resource(dir: 'js', file: 'history.js')}"></script>
        <!-- END Browser History required section -->  
            
        <script type="text/javascript" src="${resource(dir: 'js', file: 'swfobject.js')}"></script>
        <script type="text/javascript">
            // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. 
            var swfVersionStr = "11.1.0";
            // To use express install, set to playerProductInstall.swf, otherwise the empty string. 
            var xiSwfUrlStr = "${resource(dir: 'swfs', file: 'playerProductInstall.swf')}";
            var flashvars = {};
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "cgirls";
            attributes.name = "cgirls";
            attributes.align = "middle";
            swfobject.embedSWF(
                "${resource(dir: 'swfs', file: 'cgirls.swf')}", "flashContent", 
                "421", "320", 
                swfVersionStr, xiSwfUrlStr, 
                flashvars, params, attributes);
            // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
            swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
        <script type="text/javascript">
			
        	jQuery( '#carousel' ).elastislide({
				minItems : 2
			});
		
        	function initPage() {
				
        		//jQuery('#publishLink').click(initChat);

        		//initChat();
				
			};

			function initChat(){
				var modelId = jQuery('#modelId').val();
				var userId = jQuery('#userId').val();
				var url = "rtmp://localhost:1935/publishlive";
				if(modelId == userId){
					chatroom.publishVideo(modelId, url);
				}else{
					chatroom.subscribeVideo(modelId, url);
				}
			}
		</script>
</head>
<body>
  <!-- profile page starts here-->   
 <div class="inside_container">
 	<div align="left" class="inside_empty">
 	 <span class="inside_heading_title">CHAT ROOM</span>   		
    </div>
    
    <!-- chat rooms container starts here-->
    <div align="left" class="chat_container">
    <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr>
    <td width="40%" align="left" valign="top">&nbsp;</td>
    <td width="2%" align="left" valign="top">&nbsp;</td>
    <td width="58%" align="left" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td width="40%" height="15" align="left" valign="top"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="3" align="left" valign="top" style="border: 1px solid #000000;">
        	<%--<img src="${resource(dir: 'images', file: 'profile_chat_img.png')}" alt="" width="421" height="320">--%>
        	<div id="flashContent">
	            <p>
	                To view this page ensure that Adobe Flash Player version 
	                11.1.0 or greater is installed. 
	            </p>
	            <a href="http://www.adobe.com/go/getflashplayer"><img src="${resource(dir: 'images', file: 'get_flash_player.gif')}" alt="Get Adobe Flash player" /></a>
	        </div>
        
	        <noscript>
	            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="421" height="320" id="cgirls">
	                <param name="movie" value="${resource(dir: 'swfs', file: 'cgirls.swf')}" />
	                <param name="quality" value="high" />
	                <param name="bgcolor" value="#ffffff" />
	                <param name="allowScriptAccess" value="sameDomain" />
	                <param name="allowFullScreen" value="true" />
	                <!--[if !IE]>-->
	                <object type="application/x-shockwave-flash" data="${resource(dir: 'swfs', file: 'cgirls.swf')}" width="100%" height="100%">
	                    <param name="quality" value="high" />
	                    <param name="bgcolor" value="#ffffff" />
	                    <param name="allowScriptAccess" value="sameDomain" />
	                    <param name="allowFullScreen" value="true" />
	                <!--<![endif]-->
	                <!--[if gte IE 6]>-->
	                    <p> 
	                        Either scripts and active content are not permitted to run or Adobe Flash Player version
	                        11.1.0 or greater is not installed.
	                    </p>
	                <!--<![endif]-->
	                    <a href="http://www.adobe.com/go/getflashplayer">
	                        <img src="${resource(dir: 'images', file: 'get_flash_player.gif')}" alt="Get Adobe Flash Player" />
	                    </a>
	                <!--[if !IE]>-->
	                </object>
	                <!--<![endif]-->
	            </object>
	        </noscript>
        </td>
      </tr>
      <tr>
        <td colspan="3" align="left" valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td align="left" valign="top">
	        <span class="info_headings">
	        	<g:fieldValue bean="${modelInstance}" field="username"/>
	        	<g:hiddenField id="modelId" name="modelId" value="${modelInstance.id}"/>
	        	<g:hiddenField id="userId" name="userId" value="${userInstance.id}"/>
	        </span>
        </td>
        <td width="7%" align="center" valign="middle" ><a href="#"><img src="${resource(dir: 'images', file: 'volume_icon.png')}" width="18" height="16"></a></td>
        <td width="7%" align="right" valign="middle" ><a href="#" id="publishLink"><img src="${resource(dir: 'images', file: 'video_icon.png')}" width="20" height="13"></a></td>
      </tr>
      <tr>
        <td colspan="3" align="left" valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3" align="left" valign="top">
        	<div class="chat_sublinks">
            	<ul>
                <li><a href="#">TIP</a></li>
                <li><a href="#">GO PRIVATE</a></li>
                <li><a href="#">GROUP SHOW</a></li>
                <li><a href="#">PM</a></li>
                <li><a href="#">PROFILE</a></li>
                <li><a href="#">MENU</a></li>
                </ul>
            </div>
        </td>
      </tr>
      <tr>
        <td colspan="3" align="left" valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3" align="left" valign="top">
        
        <div class="prev_next_model">
             <ul>
              <li><a href="#"><span><img src="${resource(dir: 'images', file: 'prev_arrow.png')}" width="16" height="10"></span>PREV MODEL</a></li>
               <li><a href="#">NEXT MODEL<span><img src="${resource(dir: 'images', file: 'next_arrow.png')}" width="16" height="10"></span></a></li>
  				</ul>
		 </div>
         
        </td>
      </tr>
    </table></td>
    <td width="2%" align="left" valign="top">&nbsp;</td>
    <td width="55%" align="left" valign="top">
    
    <div class="chat_window">
    	<div class="chat_profiles">
        	<ul>
            	<li><a href="#">Gold Brunett</a></li>
                <li><a href="#">Jetone1</a></li>
                <li><a href="#">ranger5</a></li>
                <li><a href="#">Lous90</a></li>
                <li><a href="#">japan</a></li>
                <li><a href="#">thecomposter</a></li>
                <li><a href="#">thinkgloveu</a></li>
                <li><a href="#">sainBainaUU</a></li>
                <li><a href="#">JayWuPlug</a></li>
                <li><a href="#">JackDaniel</a></li>
                <li><a href="#">dannygreen29</a></li>
                <li><a href="#">madness31</a></li>
                <li><a href="#">nas24213</a></li>
                <li><a href="#">Name1</a></li>
                <li><a href="#">Name1</a></li>
                <li><a href="#">Name1</a></li>
                <li><a href="#">Name1</a></li>
                <li><a href="#">Name1</a></li>
                              
            </ul>
        </div>
        
        <div class="message_div">
        <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr>
    <td width="55%" align="left" valign="middle"><label for="textfield"></label>
      <input type="text" class="message_textfield" id="textfield"></td>
    <td width="10%" align="center" valign="middle"><a href="#"><img src="${resource(dir: 'images', file: 'img_icon.png')}" width="30" height="25"></a></td>
    <td width="10%" align="center" valign="middle"><a href="#"><img src=""${resource(dir: 'images', file: 'smile_icon.png')}" width="28" height="28"></a></td>
    <td width="25%" align="center" valign="middle" class="message_send_btn"><a href="#">SEND</a></td>
  </tr>
</table>

        
        </div>
    </div>
    
    </td>
  </tr>
    </table>

   </div>
    <!-- chat rooms container ends here-->
 
 <div>
  
 </div>
 
 <div>
					<!-- Elastislide Carousel -->
					<ul id="carousel" class="elastislide-list">
						<li><a href="#"><img src="${resource(dir: 'images', file: '1.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '2.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '3.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '4.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '5.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '1.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '2.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '3.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '4.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '5.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '1.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '2.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '3.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '4.png')}" width="230" height="180"></a></li>
						<li><a href="#"><img src="${resource(dir: 'images', file: '5.png')}" width="230" height="180"></a></li>
					</ul>
					<!-- End Elastislide Carousel -->
				</div>

 </div>
 <!-- prifle page ends here-->
</body>
</html>